<template>
	<list class="y-flex y-flex-1">
		<header>
			<form-header text="亮色模式"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(lightForm)">
			<form-item v-model="lightForm[key]" :type="pageStyle[key].type" :label="pageStyle[key].label" :disabled="disabled" closeable @close="handleClose('lightForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('lightForm')">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加亮色样式</text>
			</view>
		</cell>
		<header>
			<form-header text="暗黑模式"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(darkForm)">
			<form-item v-model="darkForm[key]" :type="pageStyle[key].type" :label="pageStyle[key].label" :disabled="disabled" closeable @close="handleClose('darkForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('darkForm')">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加暗黑样式</text>
			</view>
		</cell>
		<options-select ref="optionsSelect"></options-select>
	</list>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import { PageStyle } from '@/assets/js/interface.js'
	import OptionsSelect from './components/options.vue'
	import FormItem from './components/FormItem.vue'
	import FormHeader from './components/Header.vue'
	export default {
		mixins: [appMixin],
		components: {OptionsSelect, FormItem, FormHeader},
		props: {
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			pageStyle () {
				return PageStyle
			}
		},
		data () {
			return {
				lightForm: {},
				darkForm: {}
			}
		},
		methods: {
			onBackPress () {
				if ( this.$refs.optionsSelect.visible ) {
					this.$refs.optionsSelect.hide()
					return true
				}
				return false
			},
			setData (jsonData) {
				const globalStyle = jsonData.globalStyle || {}
				const darkStyle = jsonData.darkStyle || globalStyle.darkStyle || {}
				Object.keys(globalStyle).forEach(key => {
					if ( key != 'darkStyle' ) this.$set(this.lightForm, key, globalStyle[key])
				})
				Object.keys(darkStyle).forEach(key => {
					this.$set(this.darkForm, key, darkStyle[key])
				})
			},
			handleStyleSelect (formName) {
				if ( this.disabled ) return
				this.$refs.optionsSelect.select({
					title: '选择添加的样式',
					actions: Object.keys(this.pageStyle).filter(key => Object.keys(this[formName]).indexOf(key) == -1).map(key => this.pageStyle[key].label),
					success: res => {
						const keys = Object.keys(this.pageStyle)
						const index = keys.findIndex(key => this.pageStyle[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this[formName], key, this.pageStyle[key].value)
					}
				})
			},
			handleClose (formName, k) {
				this[formName] = this.$utils.deleteProperty(this[formName], k)
			}
		}
	}
</script>

<style>
</style>